<template>
  <view v-if="desc.orderId" class="box" :style="theme">
    <view class="head">
      <view class="name">
        {{desc.moduleInfo && desc.moduleInfo.logisticStatusName && desc.payStatus != 5?desc.moduleInfo.logisticStatusName:desc.payStatus == 0?'待支付':desc.payStatus == 1?'超时未支付':desc.payStatus == 2?'取消支付':desc.payStatus == 3?'支付成功':'退款成功'}}
      </view>
      <view v-if="desc.payStatus == 0 && desc.payLastTime && desc.payLastTime > 0" class="flex">
        <text class="mr1">剩余支付时间</text>
        <u-count-down :time="desc.payLastTime" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
          <view class="time">
            <text class="time__item">{{ timeData.minutes }}分</text>
            <text class="time__item">{{ timeData.seconds }}</text>
          </view>
        </u-count-down>
        <text>，请尽快付款哦~</text>
      </view>
      <view v-else-if="desc.payStatus == 3 && orderType=='06' && (desc.moduleInfo.logisticStatus === '3' || desc.moduleInfo.logisticStatus === '4')">订单已支付，请及时使用～</view>
      <view v-else-if="desc.payStatus == 3 && orderType!='06'">订单已支付，请及时使用～</view>
      <view v-else-if="desc.payStatus == 5">订单退款已成功，欢迎再次购买~</view>
      <view v-else-if="desc.moduleInfo &&desc.moduleInfo.logisticStatus == 2">商品已自提签收</view>
      <view v-else-if="desc.moduleInfo &&desc.moduleInfo.logisticStatus == 1">商品已发货</view>
      <view v-else-if="desc.payStatus != 0">订单已取消，欢迎再次购买~～</view>
    </view>
    <block v-if="orderType=='06' && desc.moduleInfo && desc.moduleInfo.claimType == 0">
      <view class="addressCnt">
        <view class="address">
          <image :src="imgHost + '/ic_location@2x.png'"></image>
          <view class="desc">
            <view class="flex mb1">{{desc.moduleInfo.receiverName || ''}}
              <text class="f26 c6 ml20" style="font-weight: normal;">{{desc.moduleInfo.receiverPhone || ''}}</text>
            </view>
            <view>{{desc.moduleInfo.receiverAddress || ''}}</view>
          </view>
        </view>
      </view>
    </block>
    <block v-if="orderType=='06' && desc.moduleInfo && desc.moduleInfo.claimType == 1">
      <view class="addressCnt">
        <view class="address">
          <image :src="imgHost + '/ic_address@2x.png'"></image>
          <view class="desc">
            <view v-if="desc.moduleInfo.claimCode" class="flex mb1">取货码：<text class="f36">{{desc.moduleInfo.claimCode}}</text></view>
            <view v-else class="flex mb1">取货地址</view>
            <view>{{desc.moduleInfo.claimPositionAddress || '' }} {{ desc.moduleInfo.claimPositionName || ''}}</view>
          </view>
        </view>
        <view class="yytime mt20">
          营业时间：<text>{{desc.moduleInfo.openTimeStart || ''}} ~ {{desc.moduleInfo.openTimeEnd|| ''}}</text></view>
        <view v-if="desc.moduleInfo.telephone" class="yytel mt20">联系电话：<text>{{desc.moduleInfo.telephone}}</text></view>
      </view>
    </block>
    <view class="cont" :class="orderType=='06' && desc.moduleInfo?'wu':''">
      <view v-if="desc.venueName" class="venueName">
        <image :src="imgHost+'/ic_changguan.png'" mode="widthFix" class="locationImg"></image>
        {{desc.venueName || ''}}
      </view>
      <view v-if="desc.moduleInfo && desc.moduleInfo.detailList && desc.moduleInfo.detailList.length > 0" class="orderDetail">
        <view v-for="(em, ss) in desc.moduleInfo.detailList" :key="ss" class="detail flex" @click="jumpDetail(orderType,em)">
          <image v-if="em.imgUrl" :src="em.imgUrl" class="left" @click="previewImg(em.imgUrl)"></image>
          <image v-else-if="orderType=='11'" :src="imgHost+'/default_duibi.png'" class="left"></image>
          <image v-else-if="orderType=='18'" :src="imgHost+'/default_hire_b.png'" class="left"></image>
          <image v-else-if="orderType=='05'" :src="imgHost+'/default_kaika.png'" class="left"></image>
          <image v-else-if="orderType=='13'" :src="imgHost+'/default_shunjian.png'" class="left"></image>
          <image v-else-if="orderType=='04' || orderType=='03'" :src="imgHost+'/default_ticket.png'" class="left"></image>
          <image v-else-if="orderType=='01'" :src="imgHost+'/default_chongzhi.png'" class="left"></image>
          <image v-else-if="orderType=='20'" :src="imgHost+'/default_shouxufei.png'" class="left"></image>
          <image v-else :src="imgHost+'/default_tongyong.png'" class="left"></image>
          <view class="right">
            <view class="name flex flex_between">
              <view class="limit-1-line">{{em.name}}</view>
              <view v-if="orderType!='02' && orderType!='03' &&orderType!='04' &&orderType!='07' && orderType!='08'">
                ¥{{em.realPrice || em.realPrice === 0?em.realPrice:em.price}}
                <text v-if="em.realPrice || em.realPrice === 0">¥{{em.price}}</text>
              </view>
            </view>
            <view class="time flex flex_between">
              <view v-if="em.skuInfo" class="limit-1-line">{{orderType == '11'?'设备：':orderType == '05'?'开卡等级：' : orderType == '18'?'收费标准：':orderType=='19'?'':'规格：'}}{{em.skuInfo}}
              </view>
              <view v-else-if="em.useTime" class="limit-1-line">
                {{orderType == '08'?'活动时间':orderType == '07'?'课程时间':orderType == '04'?'有效期':'适用时间'}}：{{em.useTime}}
              </view>
              <view v-else-if="em.useItem" class="limit-1-line">
                {{orderType == '03'?'设备': orderType=='07'?'项目':orderType=='19'?'适用项目':'规格'}}：{{em.useItem}}</view>
              <view v-else class="limit-1-line"></view>
              <view v-if="em.num && orderType!='02' && orderType!='03' &&orderType!='04' &&orderType!='07' && orderType!='08'">
                <text v-if="em.status =='5'" class="ytk">已退款</text>x{{em.num}}
              </view>
            </view>

            <u-read-more ref="uReadMore" :color="color" showHeight="36rpx" :shadowStyle="shadowStyle" toggle closeText="展开" textIndent="0" fontSize="24rpx">
              <view v-if="(em.useTime && em.useItem) || (em.skuInfo && em.useItem)" class="time">
                适用项目：{{em.useItem}}
              </view>
            </u-read-more>
            <view v-if="orderType=='02'|| orderType=='03'|| orderType=='04'|| orderType=='07'|| orderType=='08'" class="flex flex_between tj">
              <view class="price">
                ¥{{orderType=='07'?(desc.originalPrice/em.num).toFixed(2):em.realPrice || em.realPrice === 0?em.realPrice:em.price }}
                <text v-if="em.realPrice || em.realPrice === 0">¥{{em.price}}</text>
              </view>
              <view v-if="em.num" class="num"><text v-if="em.status =='5'" class="ytk">已退款</text>x{{em.num}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="cnt flex flex_between">
        订单总价<text>¥{{desc.originalPrice }}</text>
      </view>
      <view v-if="(desc.realPrice || desc.realPrice ===0) && desc.realPrice != desc.originalPrice" class="cnt flex flex_between">
        优惠金额
        <text class="yh">{{ desc.originalPrice > desc.realPrice ? `-¥${(desc.originalPrice - desc.realPrice).toFixed(2)}` : '0' }}</text>
      </view>
      <view class="cnt flex flex_between">
        {{desc.payStatus == 0 || desc.payStatus == 2?'需付款':'实付款'}}
        <text>¥{{desc.realPrice || desc.realPrice === 0?desc.realPrice:desc.originalPrice}}</text>
      </view>
      <view v-if="desc.refundPrice" class="cnt flex flex_between">
        实退金额<text>¥{{desc.refundPrice}}</text>
      </view>
    </view>
    <view v-if="desc.moduleInfo && orderType == '07' && desc.moduleInfo.contact" class="orderCont">
      <view class="bt">报名信息</view>
      <view v-if="desc.moduleInfo.contact"><text>报名人姓名</text><text>{{desc.moduleInfo.contact}}</text></view>
      <view v-if="desc.moduleInfo.phone"><text>报名人电话</text><text>{{desc.moduleInfo.phone}}</text></view>
      <view v-if="desc.moduleInfo.studentName && desc.moduleInfo.courseFlag==2"><text>报名人员</text><text>{{desc.moduleInfo.studentName}}</text>
      </view>

    </view>
    <view v-if="desc.moduleInfo && orderType == '07' && desc.moduleInfo.projectName" class="orderCont">
      <view class="bt">课程信息</view>
      <view v-if="desc.moduleInfo.projectName"><text>课程类目</text><text>{{desc.moduleInfo.projectName}}</text>
      </view>
      <view v-if="desc.moduleInfo.courseTimeNum"><text>课时数</text><text>{{desc.moduleInfo.courseTimeNum}}</text>
      </view>
      <view v-if="desc.moduleInfo.siteName"><text>上课地点</text><text>{{desc.moduleInfo.siteName}}</text></view>
    </view>
    <view class="orderCont">
      <view class="bt">订单信息</view>
      <view><text>订单编号：</text><text>{{desc.orderId}}</text></view>
      <view><text>创建时间：</text><text>{{desc.createTime}}</text></view>
      <view v-if="desc.payTime"><text>支付时间：</text><text>{{desc.payTime}}</text></view>
      <view v-if="desc.refundTime"><text>退款时间：</text><text>{{desc.refundTime}}</text></view>
      <view v-if="desc.venueName"><text>购买场馆：</text><text>{{desc.venueName}}</text></view>
      <view><text>订单来源：</text><text>{{desc.orderChannel}}</text></view>
      <view v-if="desc.moduleInfo && desc.moduleInfo.logisticStatusName"><text>物流状态：</text><text>{{desc.moduleInfo.logisticStatusName}}</text></view>
      <view v-if="desc.moduleInfo && desc.moduleInfo.ztTime"><text>自提时间：</text><text>{{desc.moduleInfo.ztTime}}</text></view>
      <view v-if="desc.moduleInfo && desc.moduleInfo.fhTime"><text>发货时间：</text><text>{{desc.moduleInfo.fhTime}}</text></view>
      <view v-if="desc.moduleInfo && desc.moduleInfo.goodsTableName">
        <text>餐桌：</text><text>{{desc.moduleInfo.goodsTableName}}</text>
      </view>
    </view>
    <view style="height: 100rpx;"></view>
    <view class="orderFoot flex flex_between">
      <view class="left">
        <block v-if="desc.payStatus!='1' && desc.payStatus!='2'">
          {{desc.payStatus == 2  || desc.payStatus == 0 || desc.payStatus == 1?'需付款：':'实付款：'}}
          <text>¥{{desc.realPrice || desc.realPrice === 0?desc.realPrice:desc.originalPrice}}</text>
        </block>
      </view>
      <view v-if="orderType == '02' || orderType == '19' || orderType == '20' || orderType == '03'|| orderType == '04'|| orderType == '06'|| orderType == '07'|| orderType == '12'|| orderType == '11'|| orderType == '08'|| orderType == '13'|| orderType == '18'" class="right flex">
        <view v-if="desc.payStatus == 0" @click="DCdk">取消订单</view>
        <view v-if="desc.payStatus == 0 && orderType != '12'" class="on" @click="continueToPay">继续支付</view>
        <view v-if="orderType == 03||orderType == 02||orderType == 04 " class="on" @click="jump('/pages/venue/entranceAndExit')">进出场</view>
        <view v-if="desc.payStatus == 3 && ((orderType == '02' || orderType == '03'||(orderType == '06' && desc.moduleInfo && (desc.moduleInfo.logisticStatus === '3' || desc.moduleInfo.logisticStatus === '4'))|| orderType == '04' || orderType == '08' || orderType == '19' || (orderType == '07' && desc.moduleInfo.courseFlag == 2)))" @click="CDTD">申请退款</view>
        <view v-if="(desc.payStatus == 1 || desc.payStatus == 2 || desc.payStatus == 5) && (orderType == '02' || orderType == '03'|| orderType == '04'|| orderType == '13')" @click="deleBtn">删除订单</view>
      </view>
    </view>
    <!-- 删除订单弹框 -->
    <u-overlay :show="showDel">
      <view class="wrapper">
        <view class="block">
          <view class="block_title">提示</view>
          <view class="block_info">是否确定删除此订单</view>
          <view class="block_footer">
            <view class="block_footer_a" @click="onClickHide">取消</view>
            <view class="block_footer_b" @click="$noMultipleClicks(submitdele)">确定</view>
          </view>
        </view>
      </view>
    </u-overlay>
    <!-- 取消订单弹框 -->
    <u-overlay :show="shows">
      <view class="wrapper">
        <view class="block">
          <view class="block_title">提示</view>
          <view class="block_info">是否取消此订单</view>
          <view class="block_footer">
            <view class="block_footer_a" @click="DCqx">取消</view>
            <view class="block_footer_b" @click="$noMultipleClicks(bookingCancellation)">确定</view>
          </view>
        </view>
      </view>
    </u-overlay>
    <u-overlay :show="TDOPEN">
      <view class="wrapper">
        <view class="block">
          <view class="block_title">提示</view>
          <view class="block_info">是否申请退款此订单</view>
          <view class="block_footer">
            <view class="block_footer_a" @click="DCclose">取消</view>
            <view class="block_footer_b" @click="$noMultipleClicks(TDsubmit)">确定</view>
          </view>
        </view>
      </view>
    </u-overlay>
  </view>
</template>

<script>
export default {
  data () {
    return {
      noClick: true,
      id: '',
      orderId: '',
      orderType: '',
      desc: {},
      timeData: {},
      shows: false, //取消订单弹框
      TDOPEN: false, //退订显示隐藏
      showDel: false, //删除订单弹框
      shadowStyle: {
        backgroundImage: "none",
        paddingTop: "0",
        marginTop: "0"
      },
    }
  },
  onLoad (ops) {
    this.id = ops.id || ''
    this.orderId = ops.orderId || ''
    this.orderType = ops.orderType || ''
    let color = this.$app.ztColor()
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: color // 导航栏背景颜色
    });
    this.getDetail()
  },
  methods: {
    jump (url, params, a) {
      this.$app.jump(url, params, a);
    },
    jump2 (url, params, a) {
      this.$app.jump2(url, params, a);
    },
    jumpDetail (orderType, e) {
      if (orderType == '06' && e.goodsId && e.goodsStatus == '1') {
        this.jump('/subPackages/shop/detail?id=', e.goodsId)
      }
    },
    DCdk (e) {
      this.shows = true
    },
    DCqx () {
      this.shows = false
    },
    DCclose () {
      this.TDOPEN = false
    },
    // 退款
    CDTD (e) {
      this.TDOPEN = true
    },
    TDsubmit () {
      // 订场 02  课程 07 门票 03 套餐 04 商品 06 点餐 12
      if (this.orderType == '02') {
        this.$app.ajax({
          api: this.$api.sessionEstimation(),
          data: {
            userId: this.userInfo.id,
            param: {
              reserveAndOrderId: this.id
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '03') {
        this.$app.ajax({
          api: this.$api.ticketRefund(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '04') {
        this.$app.ajax({
          api: this.$api.mealsOnlineOrderPay(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '07') {
        this.$app.ajax({
          api: this.$api.noEnrollCourse(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '08') {
        this.$app.ajax({
          api: this.$api.activityCancelOrderMini(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '19') {
        this.$app.ajax({
          api: this.$api.specialCardOrderRefundByMp(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '06') {
        this.$app.ajax({
          api: this.$api.goodsListTk(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.getDetail()
          }
        }).catch(() => { })
      }
    },
    bookingCancellation () {
      // 订场 02  课程 07 门票 03 套餐 04 商品 06 点餐 12 兑换 11 专项卡 19
      if (this.orderType == '02') {
        this.$app.ajax({
          api: this.$api.bookingCancellation(),
          data: {
            userId: this.userInfo.id,
            param: {
              reserveAndOrderId: this.id
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '03') {
        this.$app.ajax({
          api: this.$api.cancelTicketOrder(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '20') {
        this.$app.ajax({
          api: this.$api.serviceOrderCancelPayByMp(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '04') {
        this.$app.ajax({
          api: this.$api.mealsOnlionCanlPay(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '11') {
        this.$app.ajax({
          api: this.$api.appCancelOrder(),
          data: {
            param: {
              orderId: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '07') {
        this.$app.ajax({
          api: this.$api.noEnrollCourse(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '08') {
        this.$app.ajax({
          api: this.$api.activityOrderCancelPayMini(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '06' || this.orderType == '12') {
        this.$app.ajax({
          api: this.$api.goodsQxzf(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '13') {
        this.$app.ajax({
          api: this.$api.cancelJcOrder(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '18') {
        // 器材
        this.$app.ajax({
          api: this.$api.equipmentLeaseCancelPay(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.orderId,
              flag: '1'
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.getDetail()
          }
        }).catch(() => { })
      } else if (this.orderType == '19') {
        // 器材
        this.$app.ajax({
          api: this.$api.specialCardOrderCancelPayByMp(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.getDetail()
          }
        }).catch(() => { })
      }
    },
    // 删除订单
    deleBtn () {
      this.showDel = true
    },
    onClickHide () {
      this.showDel = false
    },
    // 删除订场订单
    submitdele () {
      // 订场 02  课程 07 门票 03 套餐 04 商品 06 点餐 12
      if (this.orderType == '02') {
        this.$app.ajax({
          api: this.$api.deleBooking(),
          data: {
            userId: this.userInfo.id,
            param: {
              reserveAndOrderId: this.id
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.showDel = false
            this.$app.showToast('删除成功')
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 300)
          }
        }).catch(() => { })
      } else if (this.orderType == '03') {
        this.$app.ajax({
          api: this.$api.ticketDeletion(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.showDel = false
            this.$app.showToast('删除成功')
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 300)
          }
        }).catch(() => { })
      } else if (this.orderType == '08') {
        this.$app.ajax({
          api: this.$api.mealsDelOrderPay(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.showDel = false
            this.$app.showToast('删除成功')
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 300)
          }
        }).catch(() => { })
      } else if (this.orderType == '13') {
        this.$app.ajax({
          api: this.$api.delJcOrder(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.orderId
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.showDel = false
            this.$app.showToast('删除成功')
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 300)
          }
        }).catch(() => { })
      }

    },
    //单张图片预览
    previewImg (imgurl) {
      let _this = this;
      let imgsArray = [];
      imgsArray[0] = imgurl
      uni.previewImage({
        current: 0,
        urls: imgsArray
      });
    },
    // 继续支付订场
    continueToPay () {
      let e = this.desc
      if (e.orderType == '02') {
        // 订场 
        this.jump('/pages/order/pay?type=1&payOrder=1&businessId=', this.id + '&orderId' + e.orderId)
      } else if (e.orderType == '07') {
        //  课程
        this.jump('/pages/order/pay?type=2&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '03') {
        // 门票
        this.jump('/pages/order/pay?type=3&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '04') {
        // 套餐
        this.jump('/pages/order/pay?type=4&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '12') {
        // 点餐
        this.jump('/pages/order/pay?type=12&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '06') {
        // /商品 
        this.jump('/pages/order/pay?type=6&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '11') {
        // 兑换游戏币
        this.jump('/pages/order/pay?type=8&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '08') {
        // 活动 08
        this.jump('/pages/order/pay?type=6&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '13') {
        // 精彩 13
        this.jump('/pages/order/pay?type=13&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '18') {
        // 器材 18
        this.jump('/pages/order/pay?type=18&payOrder=1&orderId=', e.orderId)
      } else {
        this.jump('/pages/order/pay?type=' + e.orderType + '&payOrder=1&orderId=', e.orderId)
      }
    },
    onChange (e) {
      this.timeData = e
      if (e.minutes == 0 && e.seconds == 0) {
        this.getDetail()
      }
    },
    getDetail () {
      this.$app.ajax({
        api: this.$api.myOrderDetail(),
        data: {
          param: {
            orderId: this.orderId
          }
        }
      }).then((res) => {
        if (res.errorCode === '000000') {
          this.desc = res.record
          if (res.record.orderType) {
            this.orderType = res.record.orderType
          }
        }
      }).catch((err) => {
        console.log('err', err)
      })
    }
  }

}
</script>


<style scoped lang="scss">
.head {
  background-color: $color;
  box-sizing: border-box;
  padding: 30rpx 30rpx 150rpx;

  > view {
    font-size: 26rpx;
    line-height: 1.5;
    margin-top: 15rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 400;
    color: #ffffff;

    &.name {
      font-size: 36rpx;
      margin-top: 0;
      font-weight: 600;
    }
  }

  .u-count-down__text,
  .u-toolbar__wrapper__confirm {
    color: #fff !important;
  }
}

.cont {
  width: 690rpx;
  background: #ffffff;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin: -120rpx 30rpx 30rpx;
  padding: 30rpx;
  &.wu {
    margin-top: 0;
  }

  .venueName {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;

    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 10rpx;
      vertical-align: middle;
    }
  }

  .cnt {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 40rpx;
    color: #333333;
    margin-top: 15rpx;

    text {
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;

      &.yh {
        font-weight: 400;
        color: #333333;
      }
    }

    &:last-of-type {
      text {
        color: $red;
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
      }
    }
  }
}

.orderDetail {
  .detail {
    margin-top: 30rpx;
    align-items: flex-start;

    .left {
      width: 88rpx;
      height: 88rpx;
      border-radius: 8rpx;
      margin-right: 24rpx;
      flex: none;
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .name {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #222222;

        text {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          text-decoration: line-through;
          margin-left: 10rpx;
        }
      }

      .time {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 36rpx;
        color: #999999;

        .ytk {
          width: 76rpx;
          text-align: center;
          line-height: 36rpx;
          margin-right: 15rpx;
          border-radius: 4rpx;
          border: 1rpx solid #e33950;
          font-size: 20rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #e33950;
        }
      }

      .tj {
        .price {
          font-size: 30rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #222222;

          text {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            text-decoration: line-through;
            margin-left: 10rpx;
          }
        }

        .num {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;

          .ytk {
            width: 76rpx;
            text-align: center;
            line-height: 36rpx;
            margin-right: 15rpx;
            border-radius: 4rpx;
            border: 1rpx solid #e33950;
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #e33950;
          }
        }
      }
    }
  }
}

.orderCont {
  width: 690rpx;
  background: #ffffff;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin: 0 auto 30rpx;
  padding: 30rpx;

  view {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 1;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;

    &.bt {
      font-size: 30rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #222222;
    }

    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

.orderFoot {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 100rpx;
  background-color: #fff;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;

  .left {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    flex: none;

    text {
      font-size: 32rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: $red;
      box-sizing: border-box;
      margin-left: 5rpx;
    }
  }

  .right {
    justify-content: flex-end;

    view {
      width: 168rpx;
      border-radius: 34rpx;
      border: 1rpx solid #b2b2b2;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      text-align: center;
      line-height: 64rpx;
      margin-left: 20rpx;

      &:first-of-type {
        margin-left: 0;
      }

      &.on {
        border-color: $color;
        color: $color;
      }
    }
  }
}
.addressCnt {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
  width: 690rpx;
  margin: -120rpx auto 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;

  .address {
    display: flex;

    &.no {
      align-items: center;
    }

    image {
      width: 48rpx;
      height: 48rpx;
      flex: none;
      margin-top: 10rpx;
      margin-right: 30rpx;
    }

    .desc {
      flex: 1;

      view {
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: Medium;
        color: #111111;
        line-height: 1.5;

        &:nth-of-type(2) {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }

  .yytime {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;

    text {
      color: #333333;
    }
  }

  .yytel {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;

    text {
      color: $color;
    }
  }
}
</style>